<template>
<router-link to="/">返回</router-link>
  <div class="login-container">  
    <h2>登录</h2>  
    <form @submit.prevent="login">  
      <label for="username">用户名:</label>  
      <input type="text" id="username" v-model="username" required>  
      <label for="password">密码:</label>  
      <input type="password" id="password" v-model="password" required>  
      <button type="submit">登录</button>  
    </form>  
   
  </div>  
</template>  

<script>
import axios from 'axios';  
  
export default {  
  data() {  
    return {  
      username: '',  
      password: ''  
    };  
  },  
  methods: {  
    login() {  
      axios.post('http://127.0.0.1:8000/request/', {  
        username: this.username,  
        password: this.password  
      })  
      .then(response => {  
        // 登录成功处理逻辑  
        console.log(response.data);  
      })  
      .catch(error => {  
        // 登录失败处理逻辑  
        console.log(error);  
      });  
    }  
  }  
};  
</script>
  
<style>  
.login-container {
  margin-top: 10vh;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 60vh;  
  background-color: #f5f5f5;  
}  
  
h2 {  
  margin-bottom: 20px;  
}  
  
form {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
}  
  
label {  
  margin-bottom: 10px;  
}  
  
input {  
  padding: 5px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
}  
  
button {  
  margin-top: 30px;
  padding: 10px 20px;  
  background-color:blue;  
  color: white;  
  border: none;  
  cursor: pointer;  
}  
</style>

